<template>
  <div class="versionManage" :class="'view-' + displayType">
    <div class="version-btns">
      <el-button type="primary" @click="addVersion">添加版本</el-button>
      <el-button @click="displayType = displayType ^ 1" icon="el-icon-refresh">切换视图</el-button>
    </div>
    <y-table
      v-if="displayType === 0"
      ref="table"
      border
      :getDataWay="getDataWay"
      :columns="columns">
      <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="80">
        <template v-slot="{row}">
          <div class="table-buttons">
            <el-button type="primary" size="mini" @click="editVersion(row)">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </y-table>
    <div class="version-view-block" v-if="displayType === 1">
      <div class="version-view-item" v-for="item in tableData" :key="item.id">
        <header class="version-item-header">
          <span>{{item.versionNo}}</span>
          <span>{{item.createUserName + ' released at ' + item.postTime}}</span>
        </header>
        <div class="version-item-content">
          <p v-for="(p, i) in item.remarks.split('\n')" :key="i">{{p}}</p>
        </div>
      </div>
    </div>
    <y-form
      v-model="forms.formModel"
      :visible.sync="forms.showForm"
      :title="forms.formTypeTitle[forms.formsType]"
      destroy-on-close
      width="50%"
      :form-attrs="forms.formAttrs"
      :columns="forms.formColumns"
      @ensure="ensureModel">
    </y-form>
  </div>
</template>

<script>
export default {
  name: "versionManage",
  computed:{
    getDataWay(){
      return{
        dataType: 'data',
        data: this.tableData
      }
    }
  },
  created(){ this.search() },
  data(){
    return {
      displayType: 1,
      tableData: [],
      columns:[
        {
          label: "版本号",
          prop: "versionNo"
        },
        {
          label: "发布时间",
          prop: "postTime"
        }
      ],
      forms:{
        formsType: '',
        formTypeTitle: {
          'ADD': '添加版本',
          'EDIT': '编辑版本'
        },
        formModel:{
          versionNo: '',
          postTime: '',
          remarks: ''
        },
        currentForm: null,
        showForm: false,
        formAttrs:{
          labelWidth: '100px',
          rules: {
            versionNo: [{required: true, message: "请输入版本号", trigger: "blur"}],
            postTime: [{required: true, message: "请选择发布时间", trigger: "change"}],
            remarks: [{required: true, message: "请输入更新内容", trigger: "blur"}]
          }
        },
        formColumns:[
          {
            label: "版本号",
            prop: "versionNo",
            comp:{
              compType: 'input',
              attrs:{
                maxlength: 10,
                showWordLimit: true
              }
            }
          },
          {
            label: "发布时间",
            prop: "postTime",
            comp:{
              compType: 'datePicker',
              attrs: {
                type: "date",
                pickerOptions:{
                  /*disabledDate(time) {
                    return time.getTime() > Date.now();
                  },*/
                  shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                      picker.$emit('pick', new Date());
                    }
                  }]
                },
                valueFormat: 'yyyy-MM-dd'
              }
            }
          },
          {
            label: "更新内容",
            prop: "remarks",
            comp:{
              compType: 'input',
              attrs:{
                type: 'textarea',
                maxlength: 200,
                showWordLimit: true
              }
            }
          }
        ],
      }
    }
  },
  methods:{
    resetForm() {
      Object.keys(this.forms.formModel).map(key => {
        this.forms.formModel[key] = this.forms.currentForm ? this.forms.currentForm[key] : '';
      })
    },
    search(){
      this.$yAxios({
        url: this.$api.system.versionPage,
        loading: true
      }, info => {
        this.tableData = info;
      });
    },
    addVersion(){
      this.forms.formsType = 'ADD';
      this.forms.currentForm = null;
      this.resetForm();
      this.forms.showForm = true;
    },
    editVersion(row){
      this.forms.formsType = 'EDIT';
      this.forms.currentForm = row;
      this.resetForm();
      this.forms.showForm = true;
    },
    ensureModel(form){
      let newForm;
      if(this.forms.formsType === 'EDIT'){
        newForm = Object.assign({}, this.forms.currentForm, form);
      }else{
        newForm = form;
      }
      this.$yAxios({
        url: this.$api.system.saveVersion,
        data: newForm,
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.search();
      })
    }
  }
}
</script>

<style scoped lang="less">
.versionManage{
  position: relative;
  .version-btns{
    text-align: right;
    //position: absolute;
    //right: 5px;
    //top: 0;
  }
  &.view-1{
    .version-btns{
      width: 800px;
      margin: 0 auto;
    }
  }
  .version-view-block{
    width: 800px;
    margin: 10px auto 0;
    >.version-view-item{
      border: @common-border;
      padding: 16px 0;
      border-radius: 4px;
      &:not(:last-child){
        margin-bottom: 20px;
      }
      >.version-item-header{
        display: flex;
        align-items: center;
        border-bottom: @common-border;
        padding: 0 16px 16px;
        span:first-child{
          font-size: 32px;
          font-weight: 600;
          display: inline-block;
          margin-right: 16px;
        }
        span:last-child{
          color: gray;
        }
      }
      >.version-item-content{
        padding: 16px 16px 0;
        word-break: break-all;
        >p{
          margin: 0;
          line-height: 2;
        }
      }
    }
  }
}
</style>
